@import '~less/mixin.less';

.banner {
  height: 140px;
  background: #eee;
  position: relative;
  background: url('./img/banner.png') no-repeat center center;
  background-size: cover;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  &-countdown {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,.5);
    color: #fff;
    padding-top: 36px;
    text-align: center;

    &-title {
      font-size: 16px;
      margin-bottom: 6px;

      :global {
        .anticon {
          font-size: 18px;
          margin-right: 6px;
        }
      }
    }

    &-value {
      font-size: 34px;
      font-weight: 500;
      line-height: 1.1;
      font-family: 'DIN', 'DINPro', "Helvetica Neue", Helvetica, STHeiTi, sans-serif;

      .text-overflow();
    }
  }
}
